<template>
    <div class="filter-wrapper">
        <div class="filter-item">
            <a-input v-model:value="blurry" allow-clear :placeholder="t('yl.fuzzySearch')" />
        </div>
        <div class="filter-item">
            <yl-date-picker
                form="range"
                valueFormat="YYYY-MM-DD HH:mm:ss"
                v-model:value="createTime"
                :mode="['date', 'date']"
                show-time
                :placeholder="[t('yl.createTime'), t('yl.createTime')]"
            ></yl-date-picker>
        </div>
        <div class="filter-item">
            <yl-search-reset :loading="loading" @submit="handleSubmit" @reset="handleReset"></yl-search-reset>
        </div>
    </div>
</template>
<script lang="ts">
import { defineComponent, reactive, ref, toRefs } from 'vue';
import ylDatePicker from '@/components/ylDatePicker.vue';
import ylSearchReset from '@/components/ylSeachReset.vue';
import { useI18n } from 'vue-i18n';

export default defineComponent({
    name: 'user-filter',
    components: {
        ylDatePicker,
        ylSearchReset,
    },
    props: {
        selectOptions: {
            type: Array,
            default: () => [],
        },
        hideEnabled: {
            type: Boolean,
            default: () => false,
        },
    },
    emits: ['onSubmit', 'onReset'],
    setup(props, { emit }) {
        const { t } = useI18n();
        const state = reactive({
            blurry: '',
            createTime: [],
        });
        const loading = ref<boolean>(false);
        const handleSubmit = () => {
            emit('onSubmit', state);
        };
        const handleReset = () => {
            Reflect.set(state, 'blurry', '');
            Reflect.set(state, 'createTime', []);
            emit('onReset');
        };

        return {
            ...toRefs(state),
            loading,
            handleSubmit,
            handleReset,
            t,
        };
    },
});
</script>
<style lang="scss" scoped>
.filter-wrapper {
    @include flex;
    flex-wrap: wrap;
    .filter-item {
        margin-right: $width20;
        margin-bottom: $width10;
        &:last-child {
            margin-right: $width0;
        }
    }
}
</style>
